<template>
	<div class="body">
		<div class="left">
			<!-- <div class="userInfo">
				<user-info v-if="false" :userInfo="data"></user-info>
			</div> -->
			<div class='left-head'>
				<div class="head">
					<div class="title">
						{{ data.title }}
					</div>
					<div class="time">
						<div class="eye">
							<span class="icon el-icon-view"></span>{{ data.pageview }}
						</div>
						<div class="createTime">
							<span class="el-icon-time"></span>{{ data.createTime }}
						</div>
					</div>
				</div>
				<mavon-editor
					v-model="data.content"
					:subfield="false"
					:ishljs="true"
					:boxShadow="false"
					codeStyle='atelier-lakeside-dark'
					defaultOpen="preview"
					:toolbarsFlag="false"
					class="md-body"
				/>
				<!-- <div v-html="data.htmlContent" class="markdown"></div> -->
				<!-- <markdown :html="data.htmlContent"></markdown> -->
			</div>

			<div class="comment-box">
				<div class="title">
					<span class="txt">评论列表</span>
					<!-- <el-button @click="edit">写评论</el-button> -->
				</div>
				<mavon-editor
				:toolbars="markdownOption"
				v-model="html"
				class="md-body"
				@imgAdd="$imgAdd"
				@imgDel="$imgDel"
				:boxShadow="false"
				:subfield="false"
				defaultOpen="edit"
				ref="md"/>
				<!-- <div slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</div> -->
				<el-button type="primary" @click="submit" class="submit">评 论</el-button>
				<comment :data="comment" class="comment" />
			</div>
		</div>
		<div class="right">
			<author class="author"></author>
			<catalog v-if="data.htmlContent" :html="data.htmlContent" :title="data.title" class="catalog">
				<!-- <template v-slot:item>
					{{ item.name }}
				</template> -->
			</catalog>
		</div>
		
		<!-- <el-dialog title="评论内容" :visible.sync="dialogVisible">
			<mavon-editor
			:toolbars="markdownOption"
			v-model="html"
			class="md-body"
			@imgAdd="$imgAdd"
			@imgDel="$imgDel"
			:boxShadow="false"
			:subfield="false"
			defaultOpen="edit"
			ref="md"/>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</div>
		</el-dialog> -->
	</div>
</template>
<script>

	import Vue from 'vue'
	import mavonEditor from 'mavon-editor';
	import 'mavon-editor/dist/css/index.css';
	import getBlogDetails from '@/api/blog/getBlogDetails.js';
	import comment from '@/components/comment/comment.vue'
	Vue.use(mavonEditor);
	import author from '@/components/author/author.vue'
	import saveComment from "@/api/comment/saveComment.js";
	import commentList from "@/api/comment/commentList.js";

	import catalog from "@/components/catalog/catalog.vue";
	// import markdown from '@/components/common/markdown.vue'
	export default {
		computed: {
			btn() {
				return this.$store.state.loading;
			}
		},
		components:{
			author,comment,catalog,
			// markdown
		},
		data() {
			console.log(this.$route.query.id)
			return {
				// html:'# markdown-it-vue ',
				content:'',
				options: {
					markdownIt: {
						linkify: true
					},
					linkAttributes: {
						attrs: {
						target: '_blank',
						rel: 'noopener'
						}
					},
				},
				title:'',
				blogId: this.$route.query.id,
				data:{
					content:"",
					title:'',

				},
				comment:[
/*					{
						img:'http://39.97.171.32:9000/upload/04d639f3-8544-41ee-94bf-5e29dacb6a52.jpeg',
						userName: '张三',
						userId: 'zhangsan', //评论用户的id，用于跳转到用户界面
						html: '<p>评论1</p>',
						date: '2020-09-12'
					},
					{
						img:'http://39.97.171.32:9000/upload/04d639f3-8544-41ee-94bf-5e29dacb6a52.jpeg',
						reply: '张三',
						replyId: 'zhangsan', //被回复用户的id，用于跳转到用户界面
						userName: '李四',
						userId: 'lisi',
						html: '<p>评论3</p>',
						date: '2020-09-12'
					},
					{
						img:'http://39.97.171.32:9000/upload/04d639f3-8544-41ee-94bf-5e29dacb6a52.jpeg',
						userName: '张三',
						html: '<p>评论2</p>',
						date: '2020-09-12'
					}*/
				],
				html:'',
				dialogVisible: false,
				markdownOption:{
					bold: true, // 粗体
					italic: true, // 斜体
					header: true, // 标题
					underline: true, // 下划线
					strikethrough: true, // 中划线
					mark: true, // 标记
					superscript: true, // 上角标
					subscript: true, // 下角标
					quote: true, // 引用
					ol: true, // 有序列表
					ul: true, // 无序列表
					link: true, // 链接
					imagelink: true, // 图片链接
					code: true, // code
					table: true, // 表格
					fullscreen: false, // 全屏编辑
					readmodel: false, // 沉浸式阅读
					htmlcode: false, // 展示html源码
					help: false, // 帮助
					/* 1.3.5 */
					undo: true, // 上一步
					redo: true, // 下一步
					trash: true, // 清空
					save: false, // 保存（触发events中的save事件）
					/* 1.4.2 */
					navigation: false, // 导航目录
					/* 2.1.8 */
					alignleft: true, // 左对齐
					aligncenter: true, // 居中
					alignright: true, // 右对齐
					/* 2.2.1 */
					subfield: false, // 单双栏模式
					preview: false, // 预览
				},
			};
		},
		created(){
			this.getData()
			this.getCommentList()
		},
		methods: {
			async getCommentList() {//获取该博客的评论列表
				let res = await commentList({
					blogId: this.blogId
				})
				if (res.success){
					this.comment = res.data
					console.log(this.comment)
				}
			},
			reset() {
				this.html = ''
				this.$message({
					message: '清空成功',
					type: 'success'
				});
			},
			async getData() {
				let res = await getBlogDetails({
					blogId: this.blogId,
					type:'1'
				})
				//console.log(res)
				if (res.success){
					this.data = res.data
					console.log(this.data.htmlContent)
					this.$forceUpdate();
				}
			},
			edit() {
				this.dialogVisible = true
			},
			async $imgAdd(){//将新增图片存入服务器

			},
			$imgDel(){

			},
			async submit() {
				if(!this.html) {
					this.$message.error('评论不能为空');
				}
				else {
					let html = this.$refs.md.d_render
					//let md = this.html
					//console.log(html,md)
					let datamsg = {
						content:html,
						userId:this.$store.state.userInfo.userId,
						blogId:this.blogId,
						commentType:'1',
					}
					let res = await saveComment({datamsg:JSON.stringify(datamsg)})
					if (res.success){
						this.html = ''
						this.$message.success('评论成功');
						this.getCommentList()
					}else {
						this.$message.error('评论失败');
					}
				}

			}
		},
		mounted() {
			// this.getCatalog()
			
		}
	}
</script>

<style lang="scss" scoped>
	.submit {
		margin: 20rem 0 15rem 20rem;
	}
	.body {
		width: 1200rem;
		display: flex;
		justify-content: space-between;
		margin:71px auto 10px auto;
		.left {
			width: 940rem;

			overflow: hidden;
			.left-head {
				box-shadow: 0rem 2rem 12rem 6rem rgba(3,5,27,0.06);
				border-radius: 6rem;
				background: #fff;
			}
			.head {
				padding: 10rem 0;
				.title {
					box-sizing: border-box;
					padding: 0 30rem;

				}
				.time {
					box-sizing: border-box;
					padding: 0 30rem;
					margin-top: 10rem;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 14rem;
					color: #999;
				}
			}

			.md-body {
				width: 100%;
				z-index: 70;
			}
			.comment-box {
				margin-top: 10px;
				width: 100%;
				background: #fff;
				border-radius: 6rem;
				.comment {
					border-top: 1px dashed #eee;
				}
				.title {
					padding: 15rem;
					font-size: 24rem;
					border-bottom: 1px solid #eee;
					// display: flex;
					// align-items: center;
					// justify-content: space-between;
					.txt {
						font-size: 24rem;
					}
				}
			}
		}

		.right {
			width: 240px;
			margin-left: 10px;
			.author {
				width: 100%;
				height: 240px;
			}
			.catalog {
				background: #fff;
				width: 100%;
				margin-top: 10px;
				padding: 10rem 10rem 10rem 20rem;
			}
		}
	}
	// .body /deep/ .v-note-wrapper .v-note-panel .v-note-show .v-show-content h1,body /deep/ .v-note-wrapper .v-note-panel .v-note-show .v-show-content h2,.body /deep/ .v-note-wrapper .v-note-panel .v-note-show .v-show-content h3,.body /deep/ .v-note-wrapper .v-note-panel .v-note-show .v-show-content h4,.body /deep/ .v-note-wrapper .v-note-panel .v-note-show .v-show-content h5 {
	// 	padding-top: 60px;
	// 	margin-top: -60px;
	// }


</style>
